<script lang="tsx" setup>
import { getShortVideoList, ShortVideo } from "@/api/short_video";
import { onMounted, reactive, ref, getCurrentInstance } from "vue";
import { message } from "@/utils/message";
import { addDialog } from "@/components/ReDialog";
import form from "./components/form.vue";

defineOptions({ name: "ShortVideoList" });

const { proxy } = getCurrentInstance();

type filterType = {
  title: string;
  author: string;
};

const filterData = reactive<filterType>({
  title: "",
  author: ""
});

const handleDelete = (index: number, row: ShortVideo) => {
  message(`删除 ${row.title}`);
};

const columns: TableColumnList = [
  {
    type: "selection",
    align: "center"
  },
  {
    label: "标题",
    prop: "title",
    minWidth: 300,
    cellRenderer: ({ index, row }) => {
      return <el-text truncated>{row.title}</el-text>;
    }
  },
  {
    label: "作者",
    prop: "author",
    width: 100,
    cellRenderer: ({ index, row }) => {
      return <el-text truncated>{row.author}</el-text>;
    }
  },
  {
    label: "分类",
    prop: "category",
    width: 100,
    cellRenderer: ({ index, row }) => {
      return <el-text truncated>{row.category}</el-text>;
    }
  },
  {
    label: "标签",
    prop: "tags",
    width: 120,
    cellRenderer: ({ index, row }) => {
      return <el-text truncated>{row.tags}</el-text>;
    }
  },
  {
    label: "创建时间",
    prop: "created_at",
    width: 120
  },
  {
    label: "操作",
    cellRenderer: ({ index, row }) => (
      <>
        <el-button size="small" onClick={() => handleEdit(index + 1, row)}>
          编辑
        </el-button>
        <el-popconfirm
          title="确定要删除?"
          onConfirm={() => handleDelete(index + 1, row)}
          v-slots={{
            reference: () => <el-button size="small">删除</el-button>
          }}
        ></el-popconfirm>
      </>
    )
  }
];

const multipleSelection = ref<any[]>([]);
const listData = reactive<Array<ShortVideo>>([]);
const loading = ref(true);
const pagination = reactive<PageMeta>({
  current_page: 1,
  page_size: 1,
  total: 0
});

const getListData = async () => {
  try {
    loading.value = true;
    const { data } = await getShortVideoList({
      current_page: pagination.current_page,
      ...filterData
    });
    listData.length = 0;
    listData.push(...data.list);

    pagination.current_page = data.meta.current_page;
    pagination.page_size = data.meta.page_size;
    pagination.total = data.meta.total;
  } catch (e) {
    console.log(e);
  } finally {
    loading.value = false;
  }
};

const onCurrentChange = (current: number) => {
  pagination.current_page = current;
  console.log(pagination);
  getListData();
};

const handleSelectionChange = (val: any[]) => {
  multipleSelection.value = val;
  console.log(val);
};

const onSubmit = () => {
  pagination.current_page = 1;
  pagination.total = 0;
  getListData();
};

const onReset = () => {
  filterData.title = "";
  filterData.author = "";
  pagination.current_page = 1;
  pagination.total = 0;
  getListData();
};

const onCreate = () => {
  addDialog({
    title: "表单",
    fullscreenIcon: true,
    contentRenderer: () => form
  });
};

const handleEdit = (index: number, row: ShortVideo) => {
  addDialog({
    title: "表单",
    fullscreenIcon: true,
    props: {
      actiive: "update",
      formInline: row
    },
    contentRenderer: () => form
  });
};

onMounted(() => {
  getListData();
});
</script>
<template>
  <div>
    <el-card class="w-full mb-4" shadow="never">
      <el-form :inline="true" :model="filterData" class="w-full">
        <el-form-item label="名称">
          <el-input v-model="filterData.title" placeholder="名称" clearable />
        </el-form-item>
        <el-form-item label="作者">
          <el-input v-model="filterData.author" placeholder="作者" clearable />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">搜索</el-button>
          <el-button @click="onReset">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card class="w-full" shadow="never">
      <template #header>
        <div class="flex justify-between">
          <h4>短视频列表</h4>
          <el-button type="primary" @click="onCreate">新增</el-button>
        </div>
      </template>
      <pure-table
        :data="listData"
        :columns="columns"
        @selection-change="handleSelectionChange"
      />
      <template #footer>
        <el-pagination
          v-model:currentPage="pagination.current_page"
          class="float-right my-4"
          :page-size="pagination.page_size"
          :total="pagination.total"
          :background="true"
          layout="prev, pager, next"
          @current-change="onCurrentChange"
        />
      </template>
    </el-card>
  </div>
</template>
